<template>
	<view class="wrap">
		<navbar><view>{{$t('index.home')}}</view></navbar>
		<view class="tom-container">
			<view class="top_block">
				<u-swiper :list="swiperList" name="image" height="240" border-radius="14"></u-swiper>
				<view class="Notice" @tap="toPage('/pages/User/AnnouncementList/AnnouncementList')">
					<u-icon name="gonggao-copy" color="#0032B7" custom-prefix="custom-icon"></u-icon>
					<view class="Notice-text">{{ textNews }}</view>
					<u-icon name="gengduo" color="#0032B7" custom-prefix="custom-icon"></u-icon>
				</view>
			</view>
			<view class="nav_swiper">
				<swiper class="swiper" indicator-dots indicator-active-color="#0032B7">
					<swiper-item class="swiper_list">
						<view class="swiper_item" @tap="toPage('/pages/index/TradingView/TradingView')">
							<image class="img" src="/static/new_images/nav1.png"></image>
							<text class="text" style="font-size: 24rpx;">{{$t('index.kxzb')}}</text>
						</view>
						<view class="swiper_item" @tap="toPage('/pages/User/apiManage/apiManage')">
							<image class="img" src="/static/new_images/nav2.png"></image>
							<text class="text">{{$t('index.apigl')}}</text>
						</view>
						<view class="swiper_item" @tap="toPage('/pages/User/LnviteFriends/LnviteFriends')">
							<image class="img" src="/static/new_images/nav3.png"></image>
							<text class="text">{{$t('index.yqhy')}}</text>
						</view>
						<view class="swiper_item" @tap="toPage('/pages/Console/Calculate/listTab')">
							<image class="img" src="/static/new_images/nav4.png"></image>
							<text class="text">{{$t('index.sycs')}}</text>
						</view>
					</swiper-item>
					<swiper-item class="swiper_list">
						<view class="swiper_item" @tap="toPage('/pages/User/AssetRecords/AssetRecords')">
							<image class="img" src="/static/new_images/nav5.png"></image>
							<text class="text">{{$t('index.zcjl')}}</text>
						</view>
						<view class="swiper_item" @tap="toFun(0)">
							<image class="img" src="/static/new_images/nav6.png"></image>
							<text class="text">{{$t('index.clgc')}}</text>
						</view>
						<view class="swiper_item" @tap="toFun(0)">
							<image class="img" src="/static/new_images/nav7.png"></image>
							<text class="text">{{$t('index.sybs')}}</text>
						</view>
						<!-- <view class="swiper_item" @tap="toFun(0)">
							<image class="img" src="/static/8.png"></image>
							<text class="text">金融服务</text>
						</view> -->
						<view class="swiper_item" @tap="toFun(0)">
							<image class="img" src="/static/new_images/nav8.png"></image>
							<text class="text">{{$t('index.jyskh')}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="List">
				<view class="List_title">{{$t('index.24hq')}}</view>
				<view class="List_item" v-for="(item, index) in indexkey" :key="index">
					<view class="left">
						<view class="item1">
							<text class="text">{{ item.title }}</text>
							{{ item.label }}
						</view>
						<view class="item2">{{ item.vol.toFixed(2) }}</view>
					</view>
					<view class="conten">
						<view class="item1">{{ item.close }}</view>
						<view class="item2">
							= ￥
							{{
								$BigNumber(item.close)
									.multipliedBy(usdtcny)
									.toFixed(2)
							}}
						</view>
					</view>
					<view
						class="right"
						:class="{
							active:
								$BigNumber(item.close)
									.minus(item.open)
									.dividedBy(item.open)
									.multipliedBy(100)
									.toFixed(2, 1) > 0
						}"
					>
						{{
							$BigNumber(item.close)
								.minus(item.open)
								.dividedBy(item.open)
								.multipliedBy(100)
								.toFixed(2, 1)
						}}%
					</view>
				</view>
				<!-- <view class="load" v-if="tick.length ==0">
					<image class="load_img" src="/static/load.gif"></image>
				</view> -->
			</view>
		</view>
		<u-toast ref="uToast" />
		<UpShow></UpShow>
	</view>
</template>

<script>
import UpShow from '@/components/UpShow/UpShow.vue';
import navbar from '@/components/navbar.vue';
import { mapState } from 'vuex';
const pako = require('pako');
export default {
	data() {
		return {
			textNews: '',
			swiperList: [],
			tick: [],
			indexkey: [],
			indexitem: [],
			show: false
		};
	},
	onShow() {
		this.indexData();
	},
	computed: {
		...mapState(['wsUrl'])
	},
	onHide() {
		this.show = false;
	},
	methods: {
		indexData() {
			var that = this;
			this.$api.homeApi.getNews().then(res => {
				this.textNews = res.data[0].title;
			});
			this.$api.homeApi.getBannerList().then(res => {
				var arr = [];
				res.data.forEach(function(item) {
					arr.push({ image: item.link });
				});
				this.swiperList = arr;
			});
			this.$api.userApi.getMyAssets().then(res => {
				that.$store.commit('updateUserInfo', res.data);
			});
			this.$api.homeApi
				.getHomePage()
				.then(res => {
					this.usdtcny = res.data.usdtcny;
					var liao = res.data.coinNameList;
					let haurl = this.wsUrl;
					uni.connectSocket({
						/*创建一个 WebSocket 连接。*/
						url: haurl,
						success: res => {}
					});
					uni.onSocketMessage(function(res) {
						var data = JSON.parse(res.data);
						if (that.tick.indexOf(data.title) === -1) {
							that.tick.push(data.title);
						}
						that.indexkey.splice(that.tick.indexOf(data.title), 1, data); /*在指定位置添加数据*/
					});
				})
				.catch(res => {
					console.log(res);
				});
		},
		toPage(link) {
			uni.navigateTo({
				url: link
			});
		},
		toFun(type) {
			if (type == 0) {
				this.$refs.uToast.show({
					title: this.$t('zwkf'),
					type: 'warning',
					duration: 1000
				});
			} else if (type == 1) {
				this.show = true;
			}
		},
		toBrowser() {
			this.show = false;
			plus.runtime.openURL(this.Exchange[this.ExchangeIndex].value);
		}
	},
	components: {
		navbar,
		UpShow
	}
};
</script>

<style lang="scss" scoped>
.top_block {
	padding: $nr-padd;
	background-color: #fff;
	border-bottom: 2rpx solid #f2f2f2;
	.Notice {
		background-color: #eaeaef;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12rpx 28rpx;
		border-radius: 40rpx;
		margin-top: 30rpx;
		.Notice-text {
			font-size: 24rpx;
			color: $tom-text-color;
			width: 100%;
			margin: 0rpx 14rpx;
			overflow: hidden; /*自动隐藏文字*/
			text-overflow: ellipsis; /*文字隐藏后添加省略号*/
			white-space: nowrap; /*强制不换行*/
			max-width: 540rpx;
		}
	}
}
.nav_swiper {
	width: 100%;
	background-color: #fff;
	margin-bottom: 20rpx;
	.swiper {
		width: 100%;
		height: 220rpx;
		padding-top: 30rpx;
		.swiper_list {
			display: flex;
			justify-content: space-around;
		}
		.swiper_item {
			text-align: center;
			height: 160rpx;
			.img {
				width: 106rpx;
				height: 110rpx;
			}
			.text {
				margin-top: -20rpx;
				display: block;
				font-size: 28rpx;
				font-weight: bold;
				color: $tom-text-color;
			}
		}
	}
}
.List {
	background-color: #fff;
	color: $tom-text-color;
	padding: $nr-padd;
	.List_title {
		font-size: 32rpx;
		font-weight: bold;
		position: relative;
		padding-left: 20rpx;
		margin-bottom: 40rpx;
		color: $text-color;
	}
	.List_title::before {
		content: '';
		position: absolute;
		background-color: $text-color;
		width: 6rpx;
		height: 30rpx;
		left: 0;
		top: 8rpx;
	}
	.List_item {
		border-radius: 4rpx;
		padding: 20rpx;
		box-shadow: $tom-block-shadow;
		margin: 30rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left {
			width: 33%;
			.item1 {
				font-size: 24rpx;
				color: $tom-text-color;
				margin-bottom: 18rpx;
				.text {
					font-weight: bold;
					font-size: 32rpx;
				}
			}
			.item2 {
				font-size: 24rpx;
				color: #9999cc;
			}
		}
		.conten {
			width: 30%;
			font-size: 24rpx;
			text-align: right;
			color: #9999cc;
			.item1 {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color: $text-color;
				font-weight: bold;
			}
		}
		.right {
			width: 140rpx;
			height: 60rpx;
			border-radius: 10rpx;
			border: 2rpx solid $tom-text-red;
			background-color: $tom-text-red;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #fff;
		}
		.active {
			background-color: $tom-text-green;
			border-color: $tom-text-green;
		}
	}
	.load {
		text-align: center;
		.load_img {
			width: 400rpx;
			height: 460rpx;
			margin: 40rpx auto;
			display: block;
		}
	}
}
.pop_nr {
	line-height: 0;
	.img {
		width: 630rpx;
		height: 430rpx;
	}
	.pop_nr_block {
		background-color: #fff;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
		line-height: normal;
		text-align: center;
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: $tom-text-color;
			text-align: center;
			padding: 20rpx 0rpx;
		}
		.btn_list {
			display: flex;
			justify-content: space-around;
			.btn {
				margin: 30rpx 0rpx;
				padding: 10rpx 40rpx;
				border-radius: 10rpx;
				background-color: $tom-text-sub-color;
				color: #fff;
			}
			.btn1 {
				background-color: $text-color;
			}
		}
		.sub {
			padding: 10rpx 50rpx;
			border-radius: 10rpx;
			background-color: $text-color;
			display: inline-block;
			margin: 30rpx 0rpx;
			color: #fff;
		}
	}
}
</style>
